CSS Custom Highlight API: Att Bemästra Textval med Flera Områden för Dynamiska Användargränssnitt

CSS Custom Highlight API är ett kraftfullt nytt verktyg för webbutvecklare som möjliggör oöverträffad kontroll över textval och markering i webbapplikationer. Till skillnad från de grundläggande webbläsarvalfunktionerna, gör detta API det möjligt för utvecklare att definiera anpassade markeringsstilar och hantera flera urvalsområden programmatiskt. Detta öppnar upp en värld av möjligheter för att skapa rika, interaktiva och tillgängliga användargränssnitt. Denna guide ger en omfattande översikt över API:et, utforskar dess möjligheter, användningsfall och implementeringsdetaljer, allt med ett globalt perspektiv.

Förstå grunderna i CSS Custom Highlight API

Innan du dyker in i komplexa scenarier är det viktigt att förstå de grundläggande koncepten i API:et. Kärnan i det introducerar CSS Custom Highlight API flera nya CSS pseudo-element, inklusive:

• ::selection: Representerar den del av ett dokument som har valts av användaren. Detta har funnits länge och tillåter grundläggande stilmallar för textval.
• ::highlight: Ett mer generellt pseudo-element för att tillämpa stilar på markerade områden. Detta är nyckeln till det nya API:ets kraft. Du kan nu skapa namngivna markeringar och tillämpa anpassad stil på var och en.
• ::target-text: Representerar den del av ett dokument som är riktat av en URI-fragment (t.ex. #section-title). Det gör att du kan styla den del av sidan som användaren rullade till via en länk.
• ::spelling-error: Representerar text som identifierats av användaragenten som innehåller stavfel. Erbjuder stilkontroll över stavfelindikatorer.
• ::grammar-error: Representerar text som identifierats av användaragenten som innehåller grammatiska fel. Erbjuder stilkontroll över grammatikfelindikatorer.

::highlight pseudo-elementet är API:ets arbetshäst. Det låter dig definiera namngivna markeringar i CSS och sedan tillämpa dessa markeringar på specifika textområden med hjälp av JavaScript.

Nyckelbegrepp: Områden och Markeringar

API:et kretsar kring begreppen områden och markeringar:

• Område: En sammanhängande textsektion i dokumentet. Representeras av Range-objektet i JavaScript.
• Markering: En namngiven stil som tillämpas på ett eller flera områden. Definieras i CSS med hjälp av ::highlight(highlight-name) pseudo-elementet och manipuleras via Highlight och HighlightRegistry API:erna i JavaScript.

Tänk på det så här: ett område är 'vadet' (texten du vill markera), och markeringen är 'hur' (stilen du vill tillämpa).

Ställa in anpassade markeringar med CSS

Det första steget är att definiera dina anpassade markeringsstilar i CSS. Du gör detta med ::highlight() pseudo-elementet.

            
::highlight(search-result) {
  background-color: yellow;
  color: black;
}

::highlight(important-term) {
  background-color: lightblue;
  font-weight: bold;
}

            

              
                Copy
              
            
          

I det här exemplet har vi definierat två anpassade markeringsstilar: search-result och important-term. search-result-markeringen kommer att applicera en gul bakgrund med svart text, medan important-term-markeringen kommer att använda en ljusblå bakgrund och fet stil på texten. Du kan definiera alla CSS-egenskaper du vill ha inom dessa markeringsstilar.

Hantera markeringar med JavaScript

När du har definierat dina markeringsstilar i CSS kan du använda JavaScript för att tillämpa dem på specifika textområden. Highlight och HighlightRegistry API:erna tillhandahåller verktygen för detta.

The HighlightRegistry

HighlightRegistry är ett globalt objekt som hanterar alla markeringar i dokumentet. Du kan komma åt det via CSS-gränssnittet:

            
const highlightRegistry = CSS.highlights;

            

              
                Copy
              
            
          

Skapa markeringar

För att skapa en markering använder du Highlight-konstruktorn:

            
const highlight = new Highlight();

            

              
                Copy
              
            
          

Initialt har en markering inga områden associerade med sig. Du måste lägga till områden i markeringen med metoden addRange().

Lägga till områden i en markering

För att lägga till ett område i en markering måste du först skapa ett Range-objekt. Du kan göra detta med hjälp av metoden document.createRange():

            
const range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);

highlight.addRange(range);

            

              
                Copy
              
            
          

Var:

• startNode: DOM-noden där området börjar.
• startOffset: Teckenförskjutningen inom startNode där området börjar.
• endNode: DOM-noden där området slutar.
• endOffset: Teckenförskjutningen inom endNode där området slutar.

Exempel: Markera sökresultat

Låt oss säga att du har ett textblock och du vill markera alla förekomster av en sökterm. Så här kan du göra det:

            
function highlightSearchResults(searchTerm, element) {
  const text = element.textContent;
  let index = text.indexOf(searchTerm);

  if (index === -1) {
    return; // Söktermen hittades inte
  }

  const highlight = new Highlight();

  while (index !== -1) {
    const range = document.createRange();
    range.setStart(element.firstChild, index);
    range.setEnd(element.firstChild, index + searchTerm.length);
    highlight.addRange(range);
    index = text.indexOf(searchTerm, index + 1);
  }

  // Tillämpa 'search-result' markeringsstil
  highlightRegistry.set('search-result', highlight);
}

const contentElement = document.getElementById('content');
highlightSearchResults('example', contentElement);

            

              
                Copy
              
            
          

Denna kodsnutt hittar alla förekomster av ordet "example" i elementet med ID "content" och tillämpar search-result markeringsstilen på dem.

Ta bort områden och markeringar

Du kan ta bort områden från en markering med metoden deleteRange():

            
highlight.deleteRange(range);

            

              
                Copy
              
            
          

Du kan också ta bort alla områden från en markering med metoden clear():

            
highlight.clear();

            

              
                Copy
              
            
          

För att ta bort en markering helt och hållet kan du använda metoden delete() i HighlightRegistry:

            
highlightRegistry.delete('search-result');

            

              
                Copy
              
            
          

Avancerade användningsfall och överväganden

CSS Custom Highlight API är ett kraftfullt verktyg som kan användas i en mängd avancerade scenarier.

Samarbetsredigering

I samarbetsredigeringsapplikationer kan du använda API:et för att markera de ändringar som gjorts av olika användare. Varje användare kan ha sin egen anpassade markeringsstil, så att du enkelt kan se vem som gjort vilka ändringar. Till exempel kan en gemensam dokumentredigerare som används av team i flera länder använda olika markeringsfärger för att representera redigeringar från teammedlemmar i Japan, Tyskland och Brasilien.

Kodredigerare

Kodredigerare kan utnyttja API:et för syntaxmarkering. Olika syntaxelement (t.ex. nyckelord, operatorer, kommentarer) kan tilldelas olika markeringsstilar. Moderna kodredigerare har ofta komplexa syntaxmarkeringsregler, och detta API möjliggör mer exakt och anpassningsbar kontroll än traditionella metoder.

Tillgänglighet

API:et kan användas för att förbättra tillgängligheten. Du kan till exempel markera det aktuella fokuselementet eller den text som läses upp av en skärmläsare. Kom ihåg att säkerställa tillräcklig färgkontrast mellan markeringsbakgrunden och textfärgen för användare med synnedsättningar. WCAG (Web Content Accessibility Guidelines) ger specifika riktlinjer för färgkontrastförhållanden.

Internationaliserings (i18n) överväganden

När du använder API:et i flerspråkiga applikationer, tänk på följande:

• Textriktning: Se till att dina markeringsstilar fungerar korrekt med både vänster-till-höger (LTR) och höger-till-vänster (RTL) språk.
• Ordbegränsningar: Olika språk har olika regler för ordbegränsningar. Var noga med att använda lämpliga algoritmer för ordbegränsningsdetektering när du markerar ord eller fraser.
• Teckenuppsättningar: API:et stöder Unicode, så du kan markera text på vilket språk som helst.

Till exempel, när du markerar söktermer på arabiska (ett RTL-språk), se till att markeringen visuellt återspeglar korrekt textriktning. På samma sätt, när du markerar nyckelord på japanska, som inte använder mellanslag mellan ord, måste du använda lämplig morfologisk analys för att identifiera ordbegränsningar.

Prestandaöverväganden

Även om API:et är kraftfullt är det viktigt att tänka på prestanda. Att skapa och hantera ett stort antal markeringar kan påverka prestandan, särskilt i stora dokument. Tänk på dessa tips:

• Optimera skapandet av områden: Att skapa Range-objekt kan vara dyrt. Återanvänd befintliga områden när det är möjligt.
• Batchuppdateringar: När du gör flera ändringar av markeringar, samla dem i en enda uppdatering för att minimera omflöden.
• Lat laddning: Markera endast den text som för närvarande är synlig för användaren. Ladda ytterligare markeringar när användaren rullar.
• Virtualisering: För mycket stora dokument, överväg att använda virtualiseringstekniker för att endast rendera den synliga delen av dokumentet.

Praktiska exempel och kodavsnitt

Exempel 1: Dynamisk nyckelordsmarkering

Det här exemplet visar hur man dynamiskt markerar nyckelord i en text baserat på användarens inmatning. Föreställ dig att en användare skriver en sökfråga i en sökruta; de markerade nyckelorden uppdateras i realtid.

            


  Detta är exempeltext. Den innehåller nyckelord som vi vill markera. Vi kommer att markera nyckelorden baserat på användarens inmatning.


            

              
                Copy
              
            
          

            
const keywordInput = document.getElementById('keyword-input');
const textContainer = document.getElementById('text-container');

keywordInput.addEventListener('input', () => {
  const keyword = keywordInput.value.trim();
  if (keyword) {
    highlightKeyword(keyword, textContainer);
  } else {
    clearHighlights(textContainer);
  }
});

function highlightKeyword(keyword, element) {
  clearHighlights(element);
  const text = element.textContent;
  let index = text.indexOf(keyword);

  if (index === -1) {
    return;
  }

  const highlight = new Highlight();

  while (index !== -1) {
    const range = document.createRange();
    range.setStart(element.firstChild, index);
    range.setEnd(element.firstChild, index + keyword.length);
    highlight.addRange(range);
    index = text.indexOf(keyword, index + 1);
  }

  CSS.highlights.set('dynamic-keyword', highlight);
}

function clearHighlights(element) {
  CSS.highlights.delete('dynamic-keyword');
}

            

              
                Copy
              
            
          

            
::highlight(dynamic-keyword) {
  background-color: rgba(255, 165, 0, 0.5); /* Halvtransparent orange */
  color: black;
}

            

              
                Copy
              
            
          

Exempel 2: Implementera en "Hitta alla"-funktion

Det här exemplet simulerar en "Hitta alla"-funktion, liknande de som finns i textredigerare och IDE:er. Alla förekomster av en sökterm markeras samtidigt.

            


  Detta dokument innehåller flera instanser av söktermen. Söktermen kommer att markeras i hela dokumentet.
  Detta är en andra instans av söktermen. Här är en annan sökterm.


            

              
                Copy
              
            
          

            
const searchTermInput = document.getElementById('search-term');
const documentContent = document.getElementById('document-content');

searchTermInput.addEventListener('input', () => {
  const searchTerm = searchTermInput.value.trim();
  if (searchTerm) {
    findAll(searchTerm, documentContent);
  } else {
    clearFindAllHighlights(documentContent);
  }
});

function findAll(searchTerm, element) {
  clearFindAllHighlights(element);
  const text = element.textContent;
  let index = text.indexOf(searchTerm);
  const highlight = new Highlight();

  while (index !== -1) {
    const range = document.createRange();
    range.setStart(element.firstChild, index);
    range.setEnd(element.firstChild, index + searchTerm.length);
    highlight.addRange(range);
    index = text.indexOf(searchTerm, index + 1);
  }

  CSS.highlights.set('find-all', highlight);
}

function clearFindAllHighlights(element) {
  CSS.highlights.delete('find-all');
}

            

              
                Copy
              
            
          

            
::highlight(find-all) {
  background-color: #90EE90; /* LightGreen */
  color: black;
}

            

              
                Copy
              
            
          

Webbläsarkompatibilitet och polyfyller

CSS Custom Highlight API är en relativt ny funktion, så webbläsarkompatibiliteten kan variera. Från och med slutet av 2024 har den bra stöd i moderna webbläsare som Chrome, Firefox, Safari och Edge. Det är dock viktigt att kontrollera de senaste webbläsarkompatibilitetsdata på webbplatser som "Can I use..." för att säkerställa att din målgrupp kan använda dina funktioner. Om du behöver stödja äldre webbläsare, kan du utforska polyfyller eller alternativa metoder som efterliknar API:ets funktionalitet, även om de kanske inte erbjuder samma prestanda eller kvalitet.

Textvals och markerings framtid

CSS Custom Highlight API representerar ett betydande steg framåt i webbutveckling och ger utvecklare finare kontroll över textval och markering. När API:et mognar och webbläsarstödet förbättras kan vi förvänta oss att se ännu mer innovativa användningsområden för denna teknik. Från avancerade textredigerare till samarbetande dokumentplattformar är möjligheterna oändliga. Detta API möjliggör en rikare, mer interaktiv och mer tillgänglig användarupplevelse. Tänk på hur detta kan användas för att förbättra användarupplevelser i allt från internationella nyhetssajter till onlineplattformar för språkinlärning.

Slutsats

CSS Custom Highlight API är ett kraftfullt verktyg för att skapa dynamiska och interaktiva användargränssnitt. Genom att förstå grundläggande koncept för områden, markeringar och HighlightRegistry kan du utnyttja detta API för att bygga övertygande användarupplevelser som tidigare var svåra eller omöjliga att uppnå. När du utforskar detta API, kom ihåg att överväga tillgänglighet, internationalisering och prestanda för att säkerställa att dina applikationer är användbara och prestandafyllda för en global publik. Med sin flexibilitet och kontroll är CSS Custom Highlight API redo att bli en viktig del av den moderna webbutvecklarens verktygslåda.